<template>
  <el-main>
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品类型搜索">
          <el-input v-model="formInline.goodsName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="foot">
      <div class="new" @click="open">新建</div>
      <div class="list">
        <template>
          <el-table :data="goodsList" style="width: 100%">
            <el-table-column prop="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="className" label="商品类型名称" width="700">
            </el-table-column>
            <el-table-column  label="操作">
              <template v-slot="{row}">
              <span style="color:#5f84ff" @click="reviseFn(row)">修改</span>&nbsp;
              <span  style="color:#ff5a5a" @click="deleteFn(row.classId)">删除</span></template>
            </el-table-column>
          </el-table>
        </template>
        <div class="ye" v-show="totalCount>10">
          <div class="ye-one">
            共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页
          </div>
          <div
            class="ye-two"
            @click="pre(-1)"
            :class="{ active: pageIndex === '1' }"
          >
            上一页
          </div>
          <div
            class="ye-three"
            @click="next(1)"
            :class="{ active: pageIndex === totalPage }"
          >
            下一页
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="type?'修改商品类型':'新增商品类型'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :before-close="closeFn"
      :modal-append-to-body="men"
    >
      <el-form :model="form" :rules="rules" ref="roleForm">
        <el-form-item label="商品类型名称" prop="text">
          <el-input
            type="text"
            placeholder="请输入"
            style="width: 250px"
            maxlength="10"
            show-word-limit
            v-model="form.text"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-main>
</template>
<script>
import { getSearch, getAdd, getDelete, getRevise } from '@/api/goods'
export default {
  data () {
    return {
      formInline: {
        goodsName: ''
      },
      pageIndex: '',
      pageSize: '',
      goodsList: [],
      totalCount: '',
      totalPage: '',
      centerDialogVisible: false,
      men: false,
      form: {
        text: ''
      },
      className: '',
      rules: {
        text: [{ required: true, message: '请输入', triggle: 'blur' }]
      },
      classId: '',
      index: '',
      type: false,
      cunid: ''
    }
  },
  async created () {
    this.search()
  },
  methods: {
    async onSubmit () {
      const res = await getSearch({
        pageIndex: 1,
        pageSize: 10,
        className: this.formInline.goodsName
      })
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      res.currentPageRecords.forEach(
        (item, index) => { (item.index = (this.pageIndex - 1) * 10 + index + 1) }
      )
      this.goodsList = res.currentPageRecords
    },
    // 封装函数调用
    async search (num) {
      const res = await getSearch({
        pageIndex: this.pageIndex ? Number(this.pageIndex) + num : 1,
        pageSize: 10
      })
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      res.currentPageRecords.forEach(
        (item, index) => { (item.index = (this.pageIndex - 1) * 10 + index + 1) }
      )
      this.goodsList = res.currentPageRecords
    },
    next (num) {
      if (this.pageIndex === this.totalPage) return
      this.search(num)
    },
    pre (num) {
      if (this.pageIndex === '1') {
        return
      }
      this.search(num)
    },
    open () {
      this.centerDialogVisible = true
    },
    async submit () {
      if (this.type) {
        await this.$refs.roleForm.validate()
        await getRevise(this.cunid, { className: this.form.text })
        this.$message.success('修改成功了哦')
        this.search(0)
      } else {
        await this.$refs.roleForm.validate()
        await getAdd({ className: this.form.text })
        this.centerDialogVisible = false
        this.$message.success('添加成功了哦')
      }
      this.search(0)
      this.closeFn()
    },
    deleteFn (a) {
      getDelete(a)
      this.search(0)
    },
    reviseFn (b) {
      this.type = true
      this.centerDialogVisible = true
      this.form.text = b.className
      this.cunid = b.classId
    },
    closeFn () {
      this.$refs.roleForm.resetFields()
      this.type = false
      this.centerDialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">

.el-main {
  background-color: #f8fafd;
  .head {
    height: 100px;
    width: 1220px;
    background-color: #ffffff;
    padding-top: 30px;
    padding-left: 10px;
    .el-button.el-button--primary {
      background-color: #5f84ff;
    }
  }
  .foot {
    height: 800px;
    width: 1220px;
    overflow: hidden;
    margin-top: 20px;
    background-color: #ffffff;
    .new {
      width: 70px;
      height: 30px;
      background-color: #ff8638;
      color: white;
      text-align: center;
      line-height: 30px;
      margin-left: 20px;
      margin-top: 10px;
      border-radius: 5px;
    }
    .list {
      .ye {
        display: flex;
        margin-top: 30px;
        .ye-one {
          color: #e7eaee;
          margin-left: 20px;
        }
        .ye-two {
          width: 70px;
          height: 30px;
          background-color: #d5ddf8;
          text-align: center;
          line-height: 30px;
          margin-left: 800px;
          margin-right: 20px;
          cursor: pointer;
        }
        .ye-three {
          width: 70px;
          height: 30px;
          background-color: #d5ddf8;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
        .active {
          cursor: not-allowed;
          color: #888;
        }
      }
    }
  }
  .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    margin-left: -250px;
    font-weight: 700;
  }
  .el-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: white;
    background-color: #f66b33;
  }
  .el-button.el-button--default {
    background-color: #f3e7e1;
    border-color: white;
  }
}
</style>
